<!--
 * @Author: wangyu
 * @Date: 2024-12-26 21:33:02
 * @LastEditTime: 2024-12-29 20:57:59
 * @LastEditors: wangyu
 * @Description: 资产详情
 * @FilePath: \dzsq-smartpark-platform\src\views\detailed\index.vue
-->
<template>
  <div class="detailed">
    <div class="left">
      <div class="left-item">
        <business :data="data.list" />
      </div>
    </div>
    <div class="right">
      <div class="left-item">
        <build :data="data" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import build from "./components/build.vue";
import business from "./components/business.vue";
const data = ref({
  ldbh: "202",
  ldmc: "办公室",
  kzmj: "183605.21",
  kzfj: "28",
  lx: "Office",
  bz: "无",
  cs: "5层",
  dcmj: "1576.55",
  fhjb: "丙类",
  nhdj: "二级",
  ldksj: 110,
  yzksj: 75,
  dqyszj: 63,
  list: [
    {
      lh: "1F",
      lc: "1F",
      lcmj: "2723.91",
      kzmj: "2394.96",
      kzfj: "28",
      ldkszj: 34,
      yzkszj: 27,
      dqyszj: 20,
      BuildingID: "2",
      Floor: "1F",
      active: true,
      list: [
        {
          mpId: "202楼104号",
          jzmj: "201",
          yszj: "12640",
          xszj: "12640",
          qymc: "重庆xx有限公司",
          qyfr: "张xx",
          lxfs: "400-123456 13012234567",
          dqzt: "在租",
          zjzt: "当前已缴清",
          yx: "sinxxx@163.com",
          mph: "201",
          fhjb: "丙类",
          nhdj: "二级",
          tnmj: "235.44",
          zj: "17400.00",
          syl: 63,
          active: false,
          history: [
            {
              name: "xx股份有限公司",
              shxydm: "91500xxxxxxxxxxxxx",
              qyfr: "王xx",
              lxfs: "023-8888****",
              lszl: "2018.02.14-2020.06.11",
              zt: "正常",
            },
            {
              name: "xx股份有限公司",
              shxydm: "91500xxxxxxxxxxxxx",
              qyfr: "王xx",
              lxfs: "023-8888****",
              lszl: "2018.02.14-2020.06.11",
              zt: "正常",
            },
            {
              name: "xx股份有限公司",
              shxydm: "91500xxxxxxxxxxxxx",
              qyfr: "王xx",
              lxfs: "023-8888****",
              lszl: "2018.02.14-2020.06.11",
              zt: "正常",
            },
            {
              name: "xx股份有限公司",
              shxydm: "91500xxxxxxxxxxxxx",
              qyfr: "王xx",
              lxfs: "023-8888****",
              lszl: "2018.02.14-2020.06.11",
              zt: "异常",
            },
            {
              name: "xx股份有限公司",
              shxydm: "91500xxxxxxxxxxxxx",
              qyfr: "王xx",
              lxfs: "023-8888****",
              lszl: "2018.02.14-2020.06.11",
              zt: "正常",
            },
            {
              name: "xx股份有限公司",
              shxydm: "91500xxxxxxxxxxxxx",
              qyfr: "王xx",
              lxfs: "023-8888****",
              lszl: "2018.02.14-2020.06.11",
              zt: "异常",
            },
            {
              name: "xx股份有限公司",
              shxydm: "91500xxxxxxxxxxxxx",
              qyfr: "王xx",
              lxfs: "023-8888****",
              lszl: "2018.02.14-2020.06.11",
              zt: "正常",
            },
            {
              name: "xx股份有限公司",
              shxydm: "91500xxxxxxxxxxxxx",
              qyfr: "王xx",
              lxfs: "023-8888****",
              lszl: "2018.02.14-2020.06.11",
              zt: "异常",
            },
            {
              name: "xx股份有限公司",
              shxydm: "91500xxxxxxxxxxxxx",
              qyfr: "王xx",
              lxfs: "023-8888****",
              lszl: "2018.02.14-2020.06.11",
              zt: "正常",
            },
            {
              name: "xx股份有限公司",
              shxydm: "91500xxxxxxxxxxxxx",
              qyfr: "王xx",
              lxfs: "023-8888****",
              lszl: "2018.02.14-2020.06.11",
              zt: "正常",
            },
            {
              name: "xx股份有限公司",
              shxydm: "91500xxxxxxxxxxxxx",
              qyfr: "王xx",
              lxfs: "023-8888****",
              lszl: "2018.02.14-2020.06.11",
              zt: "正常",
            },
          ],
        },
        {
          mpId: "202楼105号",
          jzmj: "202",
          yszj: "15640",
          xszj: "15640",
          qymc: "重庆xx有限公司",
          mph: "301",
          fhjb: "丙类",
          nhdj: "二级",
          tnmj: "235.44",
          zj: "17400.00",
          syl: "63.00",
          active: false,
        },
        {
          mpId: "202楼106号",
          jzmj: "251",
          yszj: "10000",
          xszj: "12640",
          qymc: "重庆xx有限公司",
          mph: "203",
          fhjb: "丙类",
          nhdj: "二级",
          tnmj: "235.44",
          zj: "17400.00",
          syl: "63.00",
          active: false,
        },
        {
          mpId: "202楼107号",
          jzmj: "221",
          yszj: "12640",
          xszj: "12640",
          qymc: "重庆xx有限公司",
          mph: "204",
          fhjb: "丙类",
          nhdj: "二级",
          tnmj: "235.44",
          zj: "17400.00",
          syl: "63.00",
          active: false,
        },
        {
          mpId: "202楼108号",
          jzmj: "231",
          yszj: "0",
          xszj: "12640",
          qymc: "重庆xx有限公司",
          mph: "205",
          fhjb: "丙类",
          nhdj: "二级",
          tnmj: "235.44",
          zj: "17400.00",
          syl: "63.00",
          active: false,
        },
        {
          mpId: "202楼109号",
          jzmj: "241",
          ysxzj: "12640",
          xszj: "12640",
          qymc: "重庆xx有限公司",
          mph: "206",
          fhjb: "丙类",
          nhdj: "二级",
          tnmj: "235.44",
          zj: "17400.00",
          syl: "63.00",
          active: false,
        },
      ],
    },
    {
      lh: "2F",
      lc: "2F",
      lcmj: "2723.91",
      kzmj: "2394.96",
      kzfj: "28",
      active: false,
      list: [],
    },
    {
      lh: "3F",
      lc: "3F",
      lcmj: "2723.91",
      kzmj: "2394.96",
      kzfj: "28",
      active: false,
      list: [],
    },
    {
      lh: "4F",
      lc: "4F",
      lcmj: "2723.91",
      kzmj: "2394.96",
      kzfj: "28",
      active: false,
      list: [],
    },
    {
      lh: "5F",
      lc: "5F",
      lcmj: "2723.91",
      kzmj: "2394.96",
      kzfj: "28",
      active: false,
      list: [],
    },
  ],
});

onMounted(() => {
  window.eventBus.on("ToH5Building", (data) => {
    console.log("选择楼栋：", data);
    ElMessage({
      message: `选择楼栋：${data}`,
    });
  });
  window.eventBus.on("ToH5BuildingFloor", (data) => {
    ElMessage({
      message: `选择楼层：${data}`,
    });
  });
  window.eventBus.on("ToH5BuildingFloorUnit", (data) => {
    ElMessage({
      message: `选择单元：${data}`,
    });
  });
});
onUnmounted(() => {
  window.eventBus.off("ToH5Building");
  window.eventBus.off("ToH5BuildingFloor");
  window.eventBus.off("ToH5BuildingFloorUnit");
});
</script>
<style scoped lang="scss">
.detailed {
  position: relative;
  margin-top: 10px;
  .left {
    display: flex;
    height: 100%;
    width: 420px;
    flex-direction: column;
    > div:first-child {
      flex: 1;
      height: 100%;
    }
    &-lh {
      position: absolute;
    }
  }
  .right {
    position: absolute;
    display: flex;
    top: 0;
    right: 0;
    height: 100%;
    width: 420px;
    background-image: url(@/assets/imgs/u1201.svg);
    background-repeat: no-repeat;
    background-size: cover;
    flex-direction: column;
    > div {
      flex: 1;
    }
  }
}
</style>
